import { useState, useEffect, useMemo } from 'react'

const useVirtualList = (listRef, itemHeight, extraHeight) => {
  const [clientHeight, setClientHeight] = useState(0)

  useEffect(() => {
    setClientHeight(listRef.current?.clientHeight)
  }, [])

  const height = useMemo(() => (clientHeight ? clientHeight - extraHeight : 0), [clientHeight])

  // 对于滚轮、触摸板滚动滚屏，可以在可见区域外额外再渲染一定数量的条目作为缓冲
  const pageSize = useMemo(() => (height ? Math.ceil(height / itemHeight) + 10 : 0), [height])

  return {
    pageSize,
    height
  }
}

export default useVirtualList
